const app = getApp();
import grace from "../../../utils/grace.js";
import * as echarts from '../../../utils/ec-canvas/echarts';

// 设置柱状图Option
function setBarOption(chart, title, yLabel, data) {
  // 将字典类型转成x轴和y轴数据
  let name = [];
  let value = [];
  for (let key in data) {
    name.push(key);
    value.push(data[key]);
  }

  let option = {
    title: {
      text: title,
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: name,
      axisLabel: {
        interval: 'auto'
      }
    },
    yAxis: {
      type: 'value',
      name: yLabel
    },
    series: [{
      data: value,
      type: 'bar',
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'black'
            },
            formatter: '{c}'
          }
        }
      }
    }],
  }
  chart.setOption(option);
}

// 设置折线图Option
function setLineOption(chart, title, yLabel, months, data) {
  // 将字典类型转成x轴和y轴数据
  let name = [];
  let value = [];
  for (let key in data) {
    name.push(key);
    value.push(data[key]);
  }

  let option = {
    title: {
      text: title,
      left: 'center'
    },
    color: ["#37A2DA", "#d53fe3", "#5ae615"],
    legend: {
      data: name,
      top: 50,
      left: 'center',
      backgroundColor: 'white',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      name: yLabel
    },
    series: [{
      name: name[0],
      type: 'line',
      smooth: false,
      data: value[0]
    }, {
      name: name[1],
      type: 'line',
      smooth: false,
      data: value[1]
    }, {
      name: name[2],
      type: 'line',
      smooth: false,
      data: value[2]
    }]
  }
  chart.setOption(option);
}

grace.page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {},
  },
  onReady: function () {
    // 获取组件
    this.ecComponent_revenue = this.selectComponent('#mychart-dom-revenue');
    this.ecComponent_students = this.selectComponent('#mychart-dom-students');
    this.ecComponent_each = this.selectComponent('#mychart-dom-each');
    this.ecComponent_months = this.selectComponent('#mychart-dom-months');
  },
  onLoad(){
    let that = this;
    let school_id = wx.getStorageSync('school_id')
    wx.showLoading({
      title: '加载中...',
    })
    let url = app.globalData.api + '/api/v1.0/report/student/' + school_id;
    that.$http.get(url, { token: wx.getStorageSync('token') }).then((res) => {
      if (res.data.code == 0) {

        // that.echartInit(res.data.data);

        let testdata1 = {'第一家': 40, '第二家': 50, '金童玲': 60};
        let testdata2 = {'第一家': 400, '第二家': 500, '金童玲': 610};
        let testdata3 = {'第一家': 1020, '第二家': 1500, '金童玲': 1610};
        let months = ['一月', '二月', '三月', '四月', '五月', '六月']
        let testdata4 = {'第一家': [40, 42, 50, 35, 61, 56], '第二家': [52, 46, 61, 61, 53, 60], '金童玲': [53, 46, 51, 60, 58, 66]};
        that.echartInit(testdata1, testdata2, testdata3, months, testdata4);
      } else if (res.data.code == 10001) {
        wx.navigateTo({
          url: "/pages/common/authorize/index"
        })
      }
      wx.hideLoading();
    }).catch(err => {
      console.log(err.status, err.message);
    });
  },
  echartInit (data1, data2, data3, months, data4) {
    // 收入图表
    this.ecComponent_revenue.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setBarOption(chart, '当月收入', '收入(万元)', data1);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    // 学生数图表
    this.ecComponent_students.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setBarOption(chart, '学生数', '幼儿人数', data2);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    // 人均收入图表
    this.ecComponent_each.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setBarOption(chart, '当月人均收入', '收入(元)', data3);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    // 近6个月收入图表
    this.ecComponent_months.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setLineOption(chart, '收入趋势', '收入(万元)', months, data4);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  }
})